<?php
date_default_timezone_set('America/Bogota');
$transaccion1 = $transaccion + 1;
$transaccion2 = $transaccion + 2;
$transaccion3 = $transaccion + 3;
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <?php $this->load->view('head'); ?>
        <script src="<?php echo base_url() . "js/jquery.flyout-1.2.min.js" ?>" type="text/javascript"></script>

        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url() . "css/ui.jqgrid.css" ?>" />
        <script src="<?php echo base_url() . "js/i18n/grid.locale-es.js" ?>" type="text/javascript"></script>
        <script src="<?php echo base_url() . "js/jquery.jqGrid.min.js" ?>"  type="text/javascript"></script>
        <title></title>
        <script type="text/javascript">
            var globalPestana = 0;
            var globalOpc = "";
<?php if (!$this->session->userdata("usuarioId_externo")) { ?>
        setTimeout("fnValida()", <?php echo TIMER; ?>); 
<?php } ?>
    $(document).ready(function(){                
        $("#aplicaInstFecha").datepicker({dateFormat:"yy-mm-dd",changeMonth: true,changeYear: true, yearRange: '1941:<?php echo date('Y'); ?>' });
        $("#aplicaInstFecha2").datepicker({dateFormat:"yy-mm-dd",changeMonth: true,changeYear: true, yearRange: '1941:<?php echo date('Y'); ?>' });
        $("#aplicaInstFecha3").datepicker({dateFormat:"yy-mm-dd",changeMonth: true,changeYear: true, yearRange: '1941:<?php echo date('Y'); ?>' });
        $( "#divTabs" ).tabs();
<?php $this->load->view('enReady'); ?>
        jQuery("#list1").jqGrid({
            url: '<?php echo site_url("grilla/guardaInst/$instrumento/$transaccion"); ?>',
            datatype: 'json',
            mtype: 'POST',
            colNames:['Eliminar','Convención (Gráfico, símbolo)','Explicación'],
            colModel :[
                {name:'accion',index:'accion', width:65,editable:false,align:"center"},
                {name:'varchar1',index:'varchar1', width:500,editable:false},
                {name:'varchar2',index:'varchar2', width:500,editable:true},
            ],
            autowidth:true,
            loadComplete: function(){
                var ids = jQuery("#list1").getDataIDs();
                for(var i=0;i<ids.length;i++){
                    var cl = ids[i];
                    var se = "<input type='button'  value='Eliminar' class='btnEnGrillaDel' onclick=\"fnEliminaGrilla('" + cl + "','T','list1');\" \\>";
                    jQuery("#list1").setRowData(cl,{accion:se});
                }
            },
            onSelectRow: function(ids) {
                var ret = jQuery("#list1").jqGrid('getRowData',ids);
                asignaValores(ret,ids,"uno");
            },
            pager: jQuery('#pager1'),
            rowNum:50,
            rowList:[10,20,30,50],
            sortname: 'varchar1',
            sortorder: "asc",
            viewrecords: true,
            caption: 'CONTEXTO-POBLACIÓN',
            height:160
        });
        //Barra de navegación
        jQuery("#list1").navGrid('#pager1',{edit:false,add:false,del:false,search:false,view:true});
        jQuery("#list2").jqGrid({
            url: '<?php echo site_url("grilla/guardaInst/$instrumento/$transaccion1"); ?>',
            datatype: 'json',
            mtype: 'POST',
            colNames:['Eliminar','Convención (Gráfico, símbolo)','Explicación'],
            colModel :[
                {name:'accion',index:'accion', width:65,editable:false,align:"center"},
                {name:'varchar1',index:'varchar1', width:400,editable:false},
                {name:'varchar2',index:'varchar2', width:400,editable:true},
            ],
            loadComplete: function(){
                var ids = jQuery("#list2").getDataIDs();
                for(var i=0;i<ids.length;i++){
                    var cl = ids[i];
                    var se = "<input type='button'  value='Eliminar' class='btnEnGrillaDel' onclick=\"fnEliminaGrilla('" + cl + "','T','list2');\" \\>";
                    jQuery("#list2").setRowData(cl,{accion:se});
                }
            },
            onSelectRow: function(ids) {
                var ret = jQuery("#list2").jqGrid('getRowData',ids);
                asignaValores(ret,ids,"dos");
            },
            pager: jQuery('#pager2'),
            rowNum:50,
            rowList:[10,20,30,50],
            sortname: 'varchar1',
            sortorder: "asc",
            viewrecords: true,
            caption: 'PASADO, PRESENTE Y FUTURO',
            height:160
        });
        //Barra de navegación
        jQuery("#list2").navGrid('#pager2',{edit:false,add:false,del:false,search:false,view:true});
        jQuery("#list3").jqGrid({
            url: '<?php echo site_url("grilla/guardaInst/$instrumento/$transaccion2"); ?>',
            datatype: 'json',
            mtype: 'POST',
            colNames:['Eliminar','Convención (Gráfico, símbolo)','Explicación'],
            colModel :[
                {name:'accion',index:'accion', width:65,editable:false,align:"center"},
                {name:'varchar1',index:'varchar1', width:400,editable:false},
                {name:'varchar2',index:'varchar2', width:400,editable:true},
            ],
            loadComplete: function(){
                var ids = jQuery("#list3").getDataIDs();
                for(var i=0;i<ids.length;i++){
                    var cl = ids[i];
                    var se = "<input type='button'  value='Eliminar' class='btnEnGrillaDel' onclick=\"fnEliminaGrilla('" + cl + "','T','list3');\" \\>";
                    jQuery("#list3").setRowData(cl,{accion:se});
                }
            },
            onSelectRow: function(ids) {
                var ret = jQuery("#list3").jqGrid('getRowData',ids);
                asignaValores(ret,ids,"tres");
            },
            pager: jQuery('#pager3'),
            rowNum:50,
            rowList:[10,20,30,50],
            sortname: 'varchar1',
            sortorder: "asc",
            viewrecords: true,
            caption: 'TEMÁTICO',
            height:160
        });
        //Barra de navegación
        jQuery("#list3").navGrid('#pager3',{edit:false,add:false,del:false,search:false,view:true});
        //Barra de navegación
        jQuery("#list2").navGrid('#pager2',{edit:false,add:false,del:false,search:false,view:true});
        jQuery("#grupoList").jqGrid({
            url: '<?php echo site_url("grilla/guardaInst/$instrumento/$transaccion3/participante"); ?>',
            datatype: 'json',
            mtype: 'POST',
            colNames:['TipDoc','Documento','Nombre','Cargo','InstitucionLabora','Apoyo Internacional'],
            colModel :[
                {name:'participanteTipDoc',index:'participanteTipDoc', width:50,editable:false},
                {name:'participanteDocumento',index:'participanteDocumento', width:90,editable:false},
                {name:'participanteNombres',index:'participanteNombres', width:100,editable:false},
                {name:'participanteCargo',index:'participanteCargo', width:100,editable:false},
                {name:'participanteInstLabora',index:'participanteInstLabora', width:100,editable:false},
                {name:'participanteApoyoInst',index:'participanteApoyoInst', width:100,editable:true},
            ],
            autowidth:true,
            onSelectRow: function(ids) {
                var ret = jQuery("#grupoList").jqGrid('getRowData',ids);
                asignaValores(ret,ids,"p");
            },
            pager: jQuery('#grupoPager'),
            rowNum:50,
            rowList:[10,20,30,50],
            sortname: 'participanteTipDoc',
            sortorder: "asc",
            viewrecords: true,
            caption: 'Participantes',
            height:160
        });
        //Barra de navegación
        jQuery("#grupoList").navGrid('#grupoPager',{edit:false,add:false,del:false,search:false,view:true});
        $("#btnGuardaParticipante").click(function(){
            if(fnValidaCampos("form", "frmParticipante"))
                $.post('<?php echo site_url("participantes/participanteInst/$transaccion3"); ?>', $("#frmParticipante").serialize(),function(){
                    jQuery('#grupoList').trigger('reloadGrid');
                    $("#frmParticipante").trigger("reset");
                });
            else fnMenError('Debe diligenciar todos los campos en rojo',0);
        });
        $('div#gallery-1 a').flyout({
            inOpacity:0,
            fullSizeImage:true,
            inSpeed:1000
        });
        $('div#gallery-2 a').flyout({
            inOpacity:0,
            fullSizeImage:true,
            inSpeed:1000
        });
        $('div#gallery-3 a').flyout({
            inOpacity:0,
            fullSizeImage:true,
            inSpeed:1000
        });
<?php if (isset($principal)) { ?>
            fnEdicion();
            $(".btnGraficas").trigger("click");
<?php }
if ($this->session->userdata("usuarioId_externo")) {
    ?>
             fntodoLectura();
<?php } ?>
    }); //fin $(document).ready(function(){

    function fnEliminaGrilla(vid,opc,valorOpc){
        switch (opc) {
            case 'T':
                $.post("<?php echo site_url("temporal/delTemp"); ?>", {id:vid}, function(data){
                    $("#" + valorOpc).trigger("reloadGrid");
                    return true;
                });
                break;
            default:
                break;
            }
            return true;
        }
        function asignaValores(datos,id,opc){
            switch (opc) {
                case "p": //participantes
                    $("#participanteNombres").val(datos.participanteNombres);
                    $("#participanteInstLabora").val(datos.participanteInstLabora);
                    $("#txtCargo").val(datos.participanteCargo);
                    $("#participanteTipDoc").val(datos.participanteTipDoc);
                    $("#participanteDocumento").val(datos.participanteDocumento);
                    $("#txtAyuda").val(datos.participanteApoyoInst);
                    $("#participanteId").val(id);
                    break;
                case "uno": //primera Grilla
                    $("#gUnoConvencion").val(datos.varchar1);
                    $("#gUnoExplicacion").val(datos.varchar2);
                    $("#tmpIdUno").val(id);
                    break;
                case "dos": //Segunda Grilla
                    $("#gDosConvencion").val(datos.varchar1);
                    $("#gDosExplicacion").val(datos.varchar2);
                    $("#tmpIdDos").val(id);
                    break;
                case "tres": //Tercera Grilla
                    $("#gTresConvencion").val(datos.varchar1);
                    $("#gTresExplicacion").val(datos.varchar2);
                    $("#tmpIdTres").val(id);
                    break;
            }
            return true;
        } //fin asignaValores(id){
        function fnEdicion(){
<?php
if (isset($principal)) {
    $con = 0;
    foreach ($principal->result() as $registro) {
        if ($con == 0) { //esto se hace para que asigne los datos de la cabecera
            echo "$('#hdInstrumento').val('{$registro->instrumentoId}');";
            echo "$('#hdaplicaInstId').val('{$registro->aplicaInstId}');";
            echo "$('#hdparticipanteId').val('{$registro->participanteId}');";
            echo "$('#aplicaInstFecha').val('{$registro->aplicaInstFecha}');";
            echo "$('#municipioUbi').val('{$registro->municipioId}');";
            echo "$('#dirUbica').val('{$registro->direccion}');";
            echo "$('#txtMunicipioId').val('{$registro->municipioId}');";
            echo "$('#txtDireccion').val('{$registro->direccion}');";
        }
        if ($registro->aplicaInstDetRuta != "") {
            echo "$('#gallery-1_a').attr('href','" . base_url() . "archivos/{$registro->aplicaInstDetRuta}');";
            echo "$('#gallery-1_img').attr('src','" . base_url() . "archivos/{$registro->aplicaInstDetRuta}');";
            echo "$('#gallery-1').css('display','block');";
        } else {
            $resp = ($registro->aplicaInstDetResp == "") ? $registro->aplicaInstDetRespText : $registro->aplicaInstDetResp;
            $resp = escapeJs($resp);
            echo "$('#" . $registro->preguntaId . "').val('" . $resp . "');";
        }

        if (isset($segunda)) { //se llenan los datos de la segunda pestaña
            $con1 = 0;
            foreach ($segunda->result() as $registro) {
                if ($con1 == 0) { //esto se hace para que asigne los datos de la cabecera
                    echo "$('#aplicaInstFecha2').val('{$registro->aplicaInstFecha}');";
                    echo "$('#hdaplicaInstId1').val('{$registro->aplicaInstId}');";
                }
                if ($registro->aplicaInstDetRuta != "") {
                    echo "$('#gallery-2_a').attr('href','" . base_url() . "archivos/{$registro->aplicaInstDetRuta}');";
                    echo "$('#gallery-2_img').attr('src','" . base_url() . "archivos/{$registro->aplicaInstDetRuta}');";
                    echo "$('#gallery-2').css('display','block');";
                } else {
                    $resp = ($registro->aplicaInstDetResp == "") ? $registro->aplicaInstDetRespText : $registro->aplicaInstDetResp;
                    $resp = escapeJs($resp);
                    echo "$('#" . $registro->preguntaId . "').val('$resp');";
                }
                $con1++;
            } //fin foreach ($segunda->result() as $registro) {
            if (isset($tercera)) { //se llenan los datos de la tercera pestaña
                $con2 = 0;
                foreach ($tercera->result() as $registro) {
                    if ($con2 == 0) { //esto se hace para que asigne los datos de la cabecera
                        echo "$('#aplicaInstFecha3').val('{$registro->aplicaInstFecha}');";
                        echo "$('#hdaplicaInstId2').val('{$registro->aplicaInstId}');";
                    }
                    if ($registro->aplicaInstDetRuta != "") {
                        echo "$('#gallery-3_a').attr('href','" . base_url() . "archivos/{$registro->aplicaInstDetRuta}');";
                        echo "$('#gallery-3_img').attr('src','" . base_url() . "archivos/{$registro->aplicaInstDetRuta}');";
                        echo "$('#gallery-3').css('display','block');";
                    } else {
                        $resp = ($registro->aplicaInstDetResp == "") ? $registro->aplicaInstDetRespText : $registro->aplicaInstDetResp;
                        $resp = escapeJs($resp);
                        echo "$('#" . $registro->preguntaId . "').val('$resp');";
                    }
                    $con2++;
                } //fin foreach ($tercera->result() as $registro) {
            } //fin if (tercera != "") { 
        } //fin if ($segunda != "") { 
        $con++;
    } //fin foreach($edicion->result() as $registro){
    ?>
<?php } //fin if ($edicion != ""){             ?>
        } //fin function fnEdicion(

        function fnValida(opc){
            if($("#municipioUbi").val() == ""){
                alert("Debe elegir el municipio");
                $("#municipioUbi").focus();
                return false;
            }
            if($("#dirUbica").val() == ""){
                alert("Debe elegir la ubicación");
                $("#dirUbica").focus();
                return false;
            }            
            $("#txtMunicipioId").val($("#municipioUbi").val());
            $("#txtDireccion").val($("#dirUbica").val());
            globalOpc = opc;
            if(opc == "T") $("#hdParcial").val("No");
            var lleno = true;
            var vartmp= true;
            $("#modalidadId").trigger("change");
            vartmp = fnValidaCampos("div","divIdentifiacion1");
            if($("#modalidadId").val() == "" ){
                asignaError("modalidadId");
                fnMenError('Debe diligenciar todos los campos en rojo',0);
                return false;
            }
            lleno = lleno && vartmp;
            if(globalPestana>=1){
                vartmp = fnValidaCampos("div","divMapa1");
                lleno = lleno && vartmp;
                vartmp = fnValidaCampos("div","divIdentifiacion2",false);
                lleno = lleno && vartmp;
            }
            if(globalPestana>=2){
                vartmp = fnValidaCampos("div","divMapa1");
                lleno = lleno && vartmp;
                vartmp = fnValidaCampos("div","divMapa2",false);
                lleno = lleno && vartmp;
                vartmp = fnValidaCampos("div","divIdentifiacion2",false);
                lleno = lleno && vartmp;
                vartmp = fnValidaCampos("div","divIdentifiacion3",false);
                lleno = lleno && vartmp;
            }
            if(opc == 'T'){
                vartmp = fnValidaCampos("form","forPreguntas");
                lleno = lleno && vartmp;
            }
            if(!lleno){
                fnMenError('Debe diligenciar todos los campos en rojo, en todas las pestañas',0);
                return false;
            }
            $("#forPreguntas").submit();        
            return true;
        } //fin fnValidaPestana4
        function fnPestana(val){
            globalPestana = val;
            $("#hdPestana").val(val);
            return;
        }
        function fnAsignaAplica(val){
            var array = val.split("|");
            $("#hdaplicaInstId").val(array[0]);
            $("#hdaplicaInstId1").val(array[1]);
            $("#hdaplicaInstId2").val(array[2]);
            if(array[3] != ""){
                $("#gallery-1").css("display", "block");
                $("#gallery-1_img").attr("src", "<?php echo base_url() . "archivos/" ?>" + array[3] );
                $("#gallery-1_a").attr("href", "<?php echo base_url() . "archivos/" ?>" + array[3] );
            }
            if(array[4] != ""){
                $("#gallery-2").css("display", "block");
                $("#gallery-2_img").attr("src", "<?php echo base_url() . "archivos/" ?>" + array[4] );
                $("#gallery-2_a").attr("href", "<?php echo base_url() . "archivos/" ?>" + array[4] );
            }
            if(array[5] != ""){
                $("#gallery-3").css("display", "block");
                $("#gallery-3_img").attr("src", "<?php echo base_url() . "archivos/" ?>" + array[5] );
                $("#gallery-3_a").attr("href", "<?php echo base_url() . "archivos/" ?>" + array[5] );
            }
            window.opener.fnRecargar();
            fnMenError("Se ha guardado el registro exitosamente",2,false);
            if(globalOpc == 'T') window.close();
            return;
        }
        function fnGuardaTemp(preguntaId,transaccion,convencion,explicacion,opc,tempId){
            $("#" + preguntaId).val(transaccion);
            if(convencion == ""){
                //            fnMenError('Ingrese información para la convención',0);
                return false;
            }
            $.post("<?php echo site_url("temporal/guardaInstru"); ?>",{prg:preguntaId,transa:transaccion,conve:convencion,exp:explicacion,id:tempId},function(){
                switch (opc) {
                    case '1':
                        jQuery('#list1').trigger('reloadGrid');
                        $('#gUnoConvencion').val('');
                        $('#gUnoExplicacion').val('');
                        $('#tmpIdUno').val('');
                        break;
                    case '2':
                        jQuery('#list2').trigger('reloadGrid');
                        $('#gDosConvencion').val('');
                        $('#gDosExplicacion').val('');
                        $('#tmpIdDos').val('');
                        break;
                    case '3':
                        jQuery('#list3').trigger('reloadGrid');
                        $('#gTresConvencion').val('');
                        $('#gTresExplicacion').val('');
                        $('#tmpIdTres').val('');
                        break;
                }
            }); //fin $.position("",{},function(){
        }//fin function fnGuardaTemp(){
        </script>
        <style type="text/css">
            .gallery {
                border:1px solid #333;
                background-color:#336699;
                width: 100px;
                height: 100px;
                float: right;
                display: none;
            }

            .gallery a { text-decoration: none; }

            .gallery img {
                position:relative;
                border:1px solid #FC0;
            }

            #loader {
                border:10px solid #D5D3D3;
                -webkit-border-radius: 10px;
                -khtml-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <script src="<?php echo base_url() . "js/wz_tooltip-min.js" ?>" type="text/javascript"></script>
        <?php $this->load->view('enBody');
        ?>

        <div id="divContenedor">
            <div class="subtitulo">INSTRUMENTO 3. ORIENTACIONES PRÁCTICAS PARA LA REALIZACIÓN DE MAPAS ACERCA DE SABERES Y  PRÁCTICAS PEDAGÓGICAS, ASÍ COMO NECESIDADES EDUCATIVAS DE AGENTES FORMATIVOS DE LA  PRIMERA INFANCIA (CARTOGRAFÍA SOCIAL-PEDAGÓGICA)</div>                    
            <div style="border: 2px black solid;text-align: justify;padding: 5px;margin: 9px" >
                <span style="font-weight: bolder">Objetivo:</span>Representar colectivamente a través de mapas (utilizando convenciones y relaciones) las percepciones que tienen los agentes educativos que  trabajan con  la primera infancia, en torno a las memorias y experiencias de pasado, necesidades y posibilidades del presente, así como sus conocimientos sobre vínculos entre los contextos social, político, económico y cultural con la situación actual de sus saberes,  prácticas pedagógicas y necesidades de formación. 
            </div>
            <div style="text-align:justify">
                <p><span style="font-weight: bolder">Dirigido a:</span> Agentes educativos que atienden a la primera infancia en el municipio, en cada una de sus modalidades.</p>
                <p><span style="font-weight: bolder">Instructivo:</span>Para la construcción de los mapas se solicita a los agentes educativos resolver los interrogantes sugeridos, dibujar un plano sobre el que se despliegue la cartografía, e identificar convenciones acerca de sus percepciones, las cuales harán posible la construcción e interpretación de los mapas. Este es un trabajo colectivo que  exige mínimo cuatro y máximo nueve agentes educativos.</p
            </div>
            <fieldset>
                <legend>Ubicación</legend>
                <table>
                    <tr>
                        <td><label for="municipioUbi">Municipio</label></td>
                        <td>
                            <select id="municipioUbi" name="municipioUbi" >
                                <option value="">Elija</option>
                                <?php
                                foreach ($municipios->result() as $municipio)
                                    echo "<option value='{$municipio->municipioId}'>{$municipio->municipio}</option>";
                                ?>
                            </select>
                        </td>
                        <td><label for="dirUbica">Dirección</label></td>
                        <td>
                            <input type="text" id="dirUbica" name="dirUbica" />
                        </td>
                    </tr>
                </table>
            </fieldset>
            <div id="divPreguntas">
                <fieldset>
                    <legend>Participantes</legend>
                    <form id="frmParticipante" method="post">
                        <table>
                            <tr>
                                <td><label for="participanteNombres">Nombres</label></td>
                                <td><input type="text" id="participanteNombres" name="participanteNombres" /></td>
                                <td><label for="participanteInstLabora">Institucion donde labora</label></td>
                                <td><input type="text" id="participanteInstLabora" name="participanteInstLabora" /></td>
                                <td><label for="txtCargo">Cargo</label></td>
                                <td><input type="text" id="txtCargo" name="txtCargo" /> </td>
                                <td rowspan="2"><input type="button" value="Agregar Participante" id="btnGuardaParticipante" /></td>
                            </tr>
                            <tr>
                                <td><label for="participanteTipDoc">Tipo Documento</label></td>
                                <td><select id="participanteTipDoc" name="participanteTipDoc">
                                        <option value="">Elija</option>   
                                        <option value="CC">Cedula Ciudadania</option>
                                        <option value="CE">Cedula Extranjeria</option>
                                        <option value="P">Pasaporte</option>
                                    </select>
                                </td>
                                <td><label for="participanteDocumento">Documento</label></td>
                                <td><input type="text" id="participanteDocumento" name="participanteDocumento" /></td>
                                <td><label for="txtAyuda">Ayuda Internacional</label></td>
                                <td><input type="text" class="omitir" id="txtAyuda" name="txtAyuda" /> 
                                    <input type="hidden" class="omitir" id="participanteId" name="participanteId" />
                                </td>
                            </tr>
                        </table>  
                    </form>
                    <div id="grupoPager" class="scroll" style="text-align:center;"></div>
                    <table id="grupoList" class="scroll" style="font-size: 14px"></table>
                </fieldset>
                <form id="forPreguntas" enctype="multipart/form-data" target="ifrAuxiliar" method="POST" action="<?php echo site_url("instrumento/guardaInstru"); ?>">
                    <input type="hidden" id="hdInstrumento" name="hdInstrumento" value="<?php echo $instrumento; ?>" />
                    <input type="hidden" id="hdaplicaInstId" name="hdaplicaInstId" value="0" />
                    <input type="hidden" id="hdaplicaInstId1" name="hdaplicaInstId1" value="0" />
                    <input type="hidden" id="hdaplicaInstId2" name="hdaplicaInstId2" value="0" />
                    <input type="hidden" id="transaccion3" name="transaccion3" value="<?php echo $transaccion3; ?>" />
                    <input type="hidden" id="hdparticipanteId" name="hdparticipanteId" value="0" />
                    <input type="hidden" id="hdParcial" name="hdParcial" value="Si" />
                    <input type="hidden" id="hdninos" name="hdninos"  />
                    <input type="hidden" id="hdPestana" name="hdPestana" value="0" />
                    <input type="hidden" id="txtMunicipioId" name="txtMunicipioId" />
                    <input type="hidden" id="txtDireccion" name="txtDireccion"  />
                    <div class="flotante">
                        <input type="button" value="Guardar" onclick="fnValida();" /><br/>
                        <input type="button" value="Terminar" onclick="fnValida('T');" />
                    </div>
                    <div id="divTabs">
                        <ul>
                            <li><a href="#divMapa1" id="aAntPatologico" onclick="fnPestana(0);">MAPA 1.  CONTEXTO-POBLACIÓN</a></li>
                            <li><a href="#divMapa2" id="aAntQuirurgicos" onclick="fnPestana(1);">MAPA 2. PASADO, PRESENTE Y FUTURO</a></li>
                            <li><a href="#divMapa3" id="aGenitoUrinarios" onclick="fnPestana(2);">MAPA 3. TEMÁTICO</a></li>
                        </ul>
                        <div id="divMapa1" class="divTabs">
                            <div  id="divIdentifiacion1">
                                <table>
                                    <tr>
                                        <td><label for="aplicaInstFecha" title="Elija la fecha de ralizacion del mapa">Fecha de realización del mapa</label></td>
                                        <td><input title="Elija la fecha de ralizacion del mapa" type="text" id="aplicaInstFecha" name="aplicaInstFecha" size="9" /></td>
                                    </tr>
                                </table>  
                            </div> <!-- fin divIdentifiacion1 -->
                            <div style="text-align: justify">
                                <p><span style="font-weight: bolder">Pregunta orientadora: </span>¿De qué manera las condiciones sociales, económicas y políticas del contexto en el que viven niños(as) y maestras(os) de esta institución influyen en el trabajo educativo y pedagógico?
                                    ¿Cómo es percibida y qué lugar ocupa la educación para la primera infancia y el rol del agente educativo que trabaja con los niños y las niñas menores de 6 años?
                                </p>
                            </div>
                            <div style="text-align: center;font-weight: bolder">
                                Pasos para la elaboración de mapas 
                            </div>
                            <?php
                            //inicia el proceso para capturar las preguntas
                            $pregunta = $preguntas->result();
                            ?>
                            <div style="text-align: justify">
                                <?php echo $pregunta[0]->preguntaTexto;
                                $puntero = 0;
                                ?>
                                <input type="hidden" name="<?php echo $pregunta[$puntero]->preguntaId; ?>" id="<?php echo $pregunta[$puntero]->preguntaId; ?>" value="<?php echo $transaccion; ?>" />
                            </div>
                            <table>
                                <caption>Grafico/Explicación</caption>
                                <tr>
                                    <td><label for="gUnoConvencion">Convención (Gráfico, símbolo)</label></td>
                                    <td><textarea rows="2" class="omitir"  name="gUnoConvencion" id="gUnoConvencion" > </textarea></td>
                                    <td><label for="gUnoExplicacion">Explicación</label></td>
                                    <td><textarea class="omitir" name="gUnoExplicacion" id="gUnoExplicacion" > </textarea></td>
                                    <td>
                                        <input type="hidden" name="tmpIdUno" id="tmpIdUno" />
                                        <input type="button" class="btnGraficas" value="Agregar Convención" onclick="fnGuardaTemp('<?php echo $pregunta[$puntero]->preguntaId; ?>','<?php echo $transaccion; ?>',$('#gUnoConvencion').val(),$('#gUnoExplicacion').val(),'1',$('#tmpIdUno').val());" /> 
                                    </td>
                                </tr>
                            </table>
                            <div class="divTituloConvenciones" >Las convenciones únicamente se guardarán en la base de datos, cuando de clic en el botón <b>Guardar</b></div>
                            <div id="pager1" class="scroll" style="text-align:center;"></div>
                            <table id="list1" class="scroll" style="font-size: 14px"></table>
                            <br/>
<?php $puntero++; ?>
                            <div style="/*float: left*/">
                                <label for="<?php echo $pregunta[$puntero]->preguntaId; ?>"><?php echo $pregunta[$puntero]->preguntaTexto; ?></label>
                                <input class="omitir" type="file" id="<?php echo $pregunta[$puntero]->preguntaId; ?>" name="<?php echo $pregunta[$puntero]->preguntaId; ?>" />
                            </div>
                            <div id="gallery-1" class="gallery" title="Click para ampliar la imagen" style="" >
                                <a id="gallery-1_a"  title="Click para ampliar la imagen"  ><img id="gallery-1_img"   style="width: 100%;height: 100%" title="Mapa No.1" /></a>
                            </div>
<?php $puntero++; ?>
                            <div class='divTxtPregunta' style="text-align: left" >
                                <label for='<?php echo $pregunta[$puntero]->preguntaId; ?>'><?php echo $pregunta[$puntero]->preguntaTexto; ?></label>
                                <textarea id='<?php echo $pregunta[$puntero]->preguntaId; ?>' name='<?php echo $pregunta[$puntero]->preguntaId; ?>' cols='100' rows='3'></textarea>
                            </div>
                        </div> <!-- fin divMapa1  -->
                        <div id="divMapa2" class="divTabs">
                            <div  id="divIdentifiacion2">
                                <table>
                                    <tr>
                                        <td><label for="aplicaInstFecha2" title="Elija la fecha de ralizacion del mapa">Fecha de realización del mapa</label></td>
                                        <td><input title="Elija la fecha de ralizacion del mapa" type="text" id="aplicaInstFecha2" name="aplicaInstFecha2" size="9"/></td>
                                    </tr>
                                </table>  
                            </div> <!-- fin divIdentifiacion2 -->
                            <div style="text-align: justify">
                                <p><span style="font-weight: bolder">Preguntas o Instrucción orientadora: </span>¿De qué manera los saberes, conocimientos y experiencias construidos durante su trabajo como agente educativo de la primera infancia han influido e influyen en su práctica pedagógica? </p><p>¿Con base en sus conocimientos, saberes y experiencias cómo se imagina su práctica pedagógica en el futuro?.</p>
                            </div>
                            <div style="text-align: center;font-weight: bolder">
                                Pasos para la elaboración de mapas 
                            </div>
                            <?php
                            //inicia el proceso para capturar las preguntas
                            $pregunta = $preguntas->result();
                            $puntero++;
                            ?>
                            <div style="text-align: justify">
<?php echo $pregunta[$puntero]->preguntaTexto; ?>
                                <input type="hidden" name="<?php echo $pregunta[$puntero]->preguntaId; ?>" id="<?php echo $pregunta[$puntero]->preguntaId; ?>" value="<?php echo $transaccion1; ?>" />
                            </div>
                            <table>
                                <caption>Grafico/Explicación</caption>
                                <tr>
                                    <td><label for="gDosConvencion">Convención (Gráfico, símbolo)</label></td>
                                    <td><textarea class="omitir" rows="3"  name="gDosConvencion" id="gDosConvencion" > </textarea></td>
                                    <td><label for="gDosExplicacion">Explicación</label></td>
                                    <td><textarea class="omitir"  rows="3" name="gDosExplicacion" id="gDosExplicacion" > </textarea></td>
                                    <td>
                                        <input type="hidden" name="tmpIdDos" id="tmpIdDos" />
                                        <input type="button" class="btnGraficas" value="Agregar Convención" onclick="fnGuardaTemp('<?php echo $pregunta[$puntero]->preguntaId; ?>','<?php echo $transaccion1; ?>',$('#gDosConvencion').val(),$('#gDosExplicacion').val(),'2',$('#tmpIdDos').val());" /> 
                                    </td>
                                </tr>
                            </table>
                            <div class="divTituloConvenciones" >Las convenciones únicamente se guardarán en la base de datos, cuando de clic en el botón <b>Guardar</b></div>
                            <div id="pager2" class="scroll" style="text-align:center;"></div>
                            <table id="list2" class="scroll" style="font-size: 14px"></table>
                            <br/>
<?php $puntero++; ?>
                            <label for="<?php echo $pregunta[$puntero]->preguntaId; ?>"><?php echo $pregunta[$puntero]->preguntaTexto; ?></label>
                            <input class="omitir" type="file" id="<?php echo $pregunta[$puntero]->preguntaId; ?>" name="<?php echo $pregunta[$puntero]->preguntaId; ?>" />
                            <div id="gallery-2" class="gallery" title="" style="" >
                                <a id="gallery-2_a"  title=""  ><img id="gallery-2_img"  alt="ppp" style="width: 100%;height: 100%" title="Mapa No.2" /></a>
                            </div>
<?php $puntero++; ?>
                            <div class='divTxtPregunta' style="text-align: left" >
                                <label for='<?php echo $pregunta[$puntero]->preguntaId; ?>'><?php echo $pregunta[$puntero]->preguntaTexto; ?></label>
                                <textarea id='<?php echo $pregunta[$puntero]->preguntaId; ?>' name='<?php echo $pregunta[$puntero]->preguntaId; ?>' cols='100' rows='3'></textarea>
                            </div>
                        </div> <!-- fin divMapa2  -->
                        <div id="divMapa3" class="divTabs">
                            <div  id="divIdentifiacion3">
                                <table>
                                    <tr>
                                        <td><label for="aplicaInstFecha3" title="Elija la fecha de ralizacion del mapa">Fecha de realización del mapa</label></td>
                                        <td><input title="Elija la fecha de ralizacion del mapa" type="text" id="aplicaInstFecha3" name="aplicaInstFecha3" size="9"/></td>
                                    </tr>
                                </table>  
                            </div> <!-- fin divIdentifiacion2 -->
                            <div style="text-align: justify">
                                <p><span style="font-weight: bolder">Preguntas o Instrucción orientadora: </span>De acuerdo con su experiencia,  </p>
                                <p>¿Cuáles son las fortalezas, debilidades y oportunidades que favorecen o afectan la atención integral de la primera infancia?</p>
                                <p>A partir de lo anterior, ¿Cuáles considera  son los vacíos en su formación que, al ser resueltos, permitirían  fortalecer  su rol como agente educativo de la primera infancia?</p>  
                            </div>
                            <div style="text-align: center;font-weight: bolder">
                                Pasos para la elaboración de mapas 
                            </div>
                            <?php
                            $puntero++;
                            ?>
                            <div style="text-align: justify">
<?php echo $pregunta[$puntero]->preguntaTexto; ?>
                                <input type="hidden" name="<?php echo $pregunta[$puntero]->preguntaId; ?>" id="<?php echo $pregunta[$puntero]->preguntaId; ?>" value="<?php echo $transaccion2; ?>" />
                            </div>
                            <table>
                                <caption>Grafico/Explicación</caption>
                                <tr>
                                    <td><label for="gTresConvencion">Convención (Gráfico, símbolo)</label></td>
                                    <td><textarea class="omitir" rows="3"  name="gTresConvencion" id="gTresConvencion" ></textarea> </td>
                                    <td><label for="gTresExplicacion">Explicación</label></td>
                                    <td><textarea class="omitir" rows="3" name="gTresExplicacion" id="gTresExplicacion" ></textarea></td>
                                    <td>
                                        <input type="hidden" name="tmpIdTres" id="tmpIdTres" />
                                        <input type="button" value="Agregar Convención" class="btnGraficas" onclick="fnGuardaTemp('<?php echo $pregunta[$puntero]->preguntaId; ?>','<?php echo $transaccion2; ?>',$('#gTresConvencion').val(),$('#gTresExplicacion').val(),'3',$('#tmpIdTres').val());" /> 
                                    </td>
                                </tr>
                            </table>
                            <div class="divTituloConvenciones" >Las convenciones únicamente se guardarán en la base de datos, cuando de clic en el botón <b>Guardar</b></div>
                            <div id="pager3" class="scroll" style="text-align:center;"></div>
                            <table id="list3" class="scroll" style="font-size: 14px"></table>
                            <br/>
<?php $puntero++; ?>
                            <label for="<?php echo $pregunta[$puntero]->preguntaId; ?>"><?php echo $pregunta[$puntero]->preguntaTexto; ?></label>
                            <input class="omitir" type="file" id="<?php echo $pregunta[$puntero]->preguntaId; ?>" name="<?php echo $pregunta[$puntero]->preguntaId; ?>" />
                            <div id="gallery-3" class="gallery" title="" style="" >
                                <a id="gallery-3_a"  title=""  ><img id="gallery-3_img"  style="width: 100%;height: 100%" title="Mapa No.3" /></a>
                            </div>
<?php $puntero++; ?>
                            <div class='divTxtPregunta' style="text-align: left" >
                                <label for='<?php echo $pregunta[$puntero]->preguntaId; ?>'><?php echo $pregunta[$puntero]->preguntaTexto; ?></label>
                                <textarea id='<?php echo $pregunta[$puntero]->preguntaId; ?>' name='<?php echo $pregunta[$puntero]->preguntaId; ?>' cols='100' rows='3'></textarea>
                            </div>
                        </div> <!-- fin divMapa3  -->
                    </div> <!-- fin  divTabs -->
                </form>
            </div><!-- fin divPreguntas -->
        </div>
    </div><!-- fin divContenedor -->
</body>
</html>
